<template>
  <div>
    <div
      v-for="i in max"
      :class="{
        circle: true,
        active: tmpRate === -1 ? i <= score : i <= tmpRate,
      }"
      :key="i"
      :id="i"
      @click="onMark(i)"
      @mouseenter="onMarkOver(i)"
      @mouseleave="onMarkOut"
    ></div>
  </div>
</template>

<script>
export default {
  model:{
    prop:'score',
    event:'change',
  },
  props:{
    score:Number,
    max:Number,
    abc:Number
  },
  data() {
    return {
      // score: 3,
      tmpRate: -1,
      // fullRate: 5,
    };
  },
  methods: {
    onMark(i) {
     this.$emit('change',i)
     this.$emit('update:abc',i)
    },
    onMarkOver(i) {
      this.tmpRate = i;
    },
    onMarkOut() {
      this.tmpRate = -1;
    },
  },
};
</script>

<style>
.circle {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 1px solid #aaa;
  display:inline-block;
  margin-right: 12px;
  outline: 1px solid transparent;
}
.circle.active {
background: skyblue;
}


</style>
